<template>
  <div>
    <el-drawer
      title="授权路径"
      :visible.sync="drawer"
      direction="rtl"
      :wrapper-closable="false"
      :before-close="handleClose"
      size="40%"
    >
      <div class="drawer-container">
        <p style="color:#909399">提醒，路径以'/'开头并以'/**'结尾</p>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="路径" prop="pattern">
            <el-input v-model="form.pattern" />
          </el-form-item>
          <el-form-item v-for="(role,i) in form.roles" :key="i" label="授权名称" prop="roles">
            <el-select v-model="form.roles[i]" placeholder="授权名称">
              <el-option v-for="(item,j) in allRoles" :key="j" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="danger" @click="form.roles.splice(i,i)">删除</el-button>
          </el-form-item>
          <el-button type="primary" @click="form.roles.push('')">新增规则</el-button>
        </el-form>
        <el-button style="float:right;" type="primary" @click="createPattern">创建授权路径</el-button>
      </div></el-drawer>

    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="createNewPattern">授权路径</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table :align="allAlign" :data="tableData">
      <vxe-column type="seq" width="60" />
      <vxe-column field="pattern" title="路径" />
      <vxe-column field="rolesZh" title="权限访问" />
      <vxe-column field="createdTime" title="创建时间" />
      <vxe-column field="updatedTime" title="更新时间" />
      <vxe-column title="操作">
        <template #default="{ row }">
          <vxe-button type="text" status="primary" @click="removeRow(row)">删除节点</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { getAllRoleMenuByPage, deleteRolesMenuById } from '@/api/user-controller'
import { getAllRoles, addNewPattern } from '@/api/role'
export default {
  data() {
    return {
      drawer: false,
      loading: false,
      allAlign: 'left',
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      tableData: [],
      form: {
        pattern: '',
        roles: ['']
      },
      allRoles: [],
      rules: {
        pattern: [
          { required: true, message: '路径', trigger: 'blur' }
        ],
        roles: [
          { required: true, message: '权限访问', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    removeRow(row) {
      deleteRolesMenuById(row.id).then(res => {
        this.$message({ message: res.data, type: 'success' })
        this.getList()
      })
    },
    createNewPattern() {
      this.drawer = true
      getAllRoles().then(res => {
        res.data.forEach(item => {
          this.allRoles.push({
            label: item.roleNameZh,
            value: item.roleName
          })
        })
      })
    },
    createPattern() {
      this.loading = true
      this.submitForm('form').then(() => {
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.getList()
    },
    getList() {
      this.loading = true
      getAllRoleMenuByPage(this.tablePage.currentPage - 1, this.tablePage.pageSize).then(response => {
        response.data.content.forEach(pattern => {
          pattern.rolesZh = ''
          pattern.qbootRoles.forEach(role => {
            pattern.rolesZh = pattern.rolesZh + `${role.roleNameZh}\n`
          })
        })
        this.tableData = response.data.content
        this.tablePage.totalResult = response.data.totalElements
        this.loading = false
      })
    },
    handleClose() {
      this.drawer = false
    },
    async submitForm(formName) {
      await this.$refs[formName].validate((valid) => {
        if (valid) {
          addNewPattern(this.form).then(response => {
            this.$message({
              message: response,
              type: 'success'
            })
            this.drawer = false
            this.getList()
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-container{
  padding:10px 30px 0 30px;
}
</style>>

